<template>
  <div class='page grey-stage home'>
    <top-filter v-show="!isShowSearch" :filterOptions="filterOptions" @load-more="loadFilter" :activeItem="filterActiveItem" @change-filter="changeFilterValue" @item-selected="topFilterItemSelected" :cancelSelect="cancelSelect" ref="topFilter"></top-filter>
    <div class="home-container" ref="container" :style="'padding-top:' + this.scrollerTop + 'px; height:' + this.scrollerHeight + 'px'">
      <section class="sales-executive mgt-6">
        <funnel-model
          :newCustom="data.new_custom"
          :customCare="data.custom_care"
          :reserve="data.reserve"
          :arrive="data.arrive"
          :initialContract="data.initial_contract"
          :renewalContract="data.renewal_contract"
          :more="false"
        ></funnel-model>
      </section>
    </div>
    <crm-cover v-if="isShowCover" :hideCoverOnClick="true"></crm-cover>
    <crm-tabbar activeItem='workbench' ref="tabbar"></crm-tabbar>
  </div>
</template>
<script>
  import {loadTeamSettings, loadMemberSettings, loadFilterFunc} from '../lib/filter'

  import crmTabbar from '../components/crm-tabbar'
  import salesTarget from '../components/sales-target'
  import salesPerformance from '../components/sales-performance'
  import salesExecutive from '../components/sales-executive'
  import FunnelModel from '../components/funnel-model'
  import topFilter from '../components/top-filter'
  import crmCover from '../components/crm-cover'
  // import Scroller from 'vue-scroller'
  import store from '../store'
  import { mapState } from 'vuex'

  export default {
    data () {
      let overHeight = document.body.scrollHeight + 22
      return {
        containerHeight: 'height:' + overHeight + 'px;',
        data: {},
        scrollerHeight: '',
        scrollerTop: '',
        isShowSearch: false,
        cancelSelect: null,
        filterActiveItem:{},
        filterData:{},
        submitData:{},
        calendar: parseInt(this.$route.query.container),
        type : 3,//2负责人 3所属团队
        filterOptions: [
          {
            title: '本月',
            class: 'txt-center',
            value: '4',
            name: 'insert_time',
            checked: '4',
            options: [
              {
                text: '今年',
                value: '0'
              },
              {
                text: '去年',
                value: '1'
              },
              {
                text: '本季度',
                value: '2'
              },
              {
                text: '上季度',
                value: '3'
              },
              {
                text: '本月',
                value: '4'
              },
              {
                text: '上月',
                value: '5'
              },
              {
                text: '本周',
                value: '6'
              },
              {
                text: '上周',
                value: '7'
              },
              {
                text: '今天',
                value: '8'
              },
              {
                text: '昨天',
                value: '9'
              }
            ]
          },
          {
            checked:"3",
            class:"txt-center",
            name:"filter",
            options:[],
            title:"筛选",
            value:"6"
          }
        ]
      }
    },
    components: {
      crmTabbar,
      salesTarget,
      salesPerformance,
      salesExecutive,
      topFilter,
      crmCover,
      FunnelModel
    },
    mounted () {
      this.filterOptions[0].title = this.filterOptions[0].options[parseInt(this.$route.query.calendar)].text
      this.filterOptions[0].checked = this.$route.query.calendar
      this.caculateScroller()
      this.$vux.loading.show({loading: '加载中...'})
      loadTeamSettings().then((options) => {
        if (options === false) {
          this.filterTeamIndex = 0
          return
        }
        console.log(options)
        if(options[0][1].options[2].options[0].value === '-1'){
          options[0][1].options[2].options.splice(0,1)
//          options[0][1].options[2].checked = options[0][1].options[2].options[0].value
        }
        options[0][1].options[2].checked = parseInt(this.$route.query.team_id)

        this.filterOptions[1].options.push(options[0][1].options[2])

      })
      loadMemberSettings().then((options) => {

        if (options === false) {
          this.filterMemberIndex = 0
          return
        }

        if(options[0][1].options[1].options[0].value === '-1'){
          options[0][1].options[1].options.splice(0,1)
          options[0][1].options[1].checked = options[0][1].options[1].options[0].value

        }


        this.filterOptions[1].options.push(options[0][1].options[1])

      })



      setTimeout(() => {
        this.getWorckbenchInfo(this.calendar,this.type)
      },1000)
    },

    methods: {
      caculateScroller () {
        const winHeight = window.innerHeight
        const filterHeight = this.$refs['topFilter'].$el.offsetHeight
        const tabbarHeight = this.$refs['tabbar'].$el.offsetHeight
        this.scrollerTop = filterHeight
        this.scrollerHeight = winHeight - filterHeight - tabbarHeight
      },
      loadFilter:loadFilterFunc,
      topFilterItemSelected (item, index) {
        console.log('topFilterItemSelected')
        if (typeof item.name !== 'undefined' && item.name === 'search') {
          this.isShowSearch = !this.isShowSearch // 搜索栏打开
          this.cancelSelect = null
        } else {
          this.isShowSearch = false // 打开的是筛选栏
        }

        if (this.isShowSearch === false) {
          if (this.isShowSearch === false) {
            this.keyword = ''
//            this.emptyCustoms()
//            this.getCustoms()
          }
        }
      },
      changeFilterValue (filterOptions) {
        filterOptions[0].options.forEach((range) => {
          if (this.filterOptions[0].checked === range.value) {
            this.filterOptions[0].title = range.text
          }
        })

        this.$vux.loading.show({loading: '加载中...'})

        this.getWorckbenchInfo()
      },

      getWorckbenchInfo (calendar, type) {

        if (!calendar) calendar = this.filterOptions[0].checked
        type = this.filterOptions[1].checked
        var that = this
        let params = ''
        // 获取工作台信息
        if (type === '2') {
          params = {calendar, who:'own'}
          if(this.filterOptions[1].options[1].checked !== '-1'){
              params.suid = this.filterOptions[1].options[1].checked
          }
        } else {
          params = {calendar, who: 'team'}
          if(this.filterOptions[1].options[0].checked !== '-1'){
              params.team_id = this.filterOptions[1].options[0].checked
          }
        }

        this.calendar = calendar
        // 获取工作台信息
        store.dispatch('getWorckbenchInfo', params).then((response) => {
          if (response.data.errcode === 0) {
            let res = response.data.results
            this.data = res
          } else {
            console.debug('系统出错请联系管理员!', JSON.stringify(response.data))
          }
          setTimeout(() => {
            this.$vux.loading.hide()
          }, 1000)
        }).catch(() => {
          setTimeout(() => {
            this.$vux.loading.hide()
          }, 1000)
        })
      },

    },
    watch: {
      filterOptions () {

      },

    },
    computed: {
      ...mapState({
        isShowCover: state => state.app.isShowCover,
        totalTarget: state => state.app.target,
        user: state => state.app.user,
      })
    }
  }
</script>
<style lang="less">

  @import "../less/base";

  .funnel-model{
    height: 350px;
  }
  section{
    background-color: white;
  }

  .home-container {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .home {
    // -webkit-overflow-scrolling: touch;
  }
</style>
